<!--
表格的内容区域
props有：
data：存放展示数据的数组 类型：数组
page：存放分页的参数的对象 {page: , pageSize: , total: } 类型：对象
Bottom: 表格距离底部的距离 类型： Number
showPage: 是否显示分页 类型： Boolean
-->
<template>
  <div class="the-table" :class="{ 'hide-scroll-bar': hideScrollBar }">
    <el-table
      ref="table"
      :data="data || tableData"
      :height="height"
      :row-class-name="tableRowClassName"
      :header-cell-style="{ background: headBg, color: '#666', 'text-align':'center' }"
      :cell-style="{'text-align':'center'}"
      :fit="true"
      :size="size"
      :style="{ marginBottom: Bottom + 'px' }"
      style="width: 100%; font-size: 14px"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
      @select-all="handleSelectAll"
      :row-key="getRowKey"
    >
      <!--@selection-change="handleSelectionChange"-->
      
      <!-- 序号显示 -->
      <el-table-column
        label="序号"
        v-if="isOrder.show"
        align="center"
        type="index"
        :width="isOrder.width"
      >
      </el-table-column>

      <!-- 插槽 -->
      <slot></slot>

      <!-- 没有数据的时候显示 -->
      <div slot="empty" class="empty" style="padding: 20px 0">
        <div v-if="showEmptyTips">
          <i class="el-icon-box"></i>
          <p>{{ emptyText }}</p>
        </div>
      </div>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :page-size.sync="page.pageSize"
        :total="Number(page.total)"
        :page-sizes="[5, 10, 20, 30, 40, 50]"
        :current-page.sync="page.current"
        @current-change="changePage"
        @size-change="changeSize"
        layout="total, sizes, prev, pager, next, jumper"
        v-if="showPage && page.total > 0"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "TheTable",
  inject: ["reload"],
  props: {
    data: Array,
    // 分页用的 page对象中有pageSize current
    page: {
      type: Object,
    },
    defaultData: Boolean,
    // Table 的高度，默认为自动高度
    height: {
      type: String,
    },
    isLimit: {
      type: Boolean,
      default: true,
    },
    // 表格没有数据时显示的文字
    emptyText: {
      type: String,
      default: "暂无数据",
    },
    // 只有一页时是否隐藏分页
    hideOnePage: {
      type: Boolean,
      default: true,
    },
    // 表格距离底部的距离 margin-bottom
    Bottom: {
      type: Number,
      default: 0,
    },
    // 是否显示分页 这里不止这一个决定条件 page.total > 0 也就是没有数据的时候它也不会显示
    showPage: {
      type: Boolean,
      default: false,
    },
    // 是否显示序号 对象 两个值 show决定是否显示 width决定宽度
    isOrder: {
      type: Object,
      default: function () {
        return { show: false, width: "50px" };
      },
    },
    hideScrollBar: {
      type: Boolean,
      default: false,
    },
    // Table 的尺寸
    size: {
      type: String,
      default: "medium",
    },
    // 表头单元格的背景
    headBg: {
      type: String,
      default: "#F8F8F9",
    },
  },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      showEmptyTips: false,
    };
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
      },
      immediate: true,
      deep: true,
    },
    page: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.pageData = newVal;
        }
      },
      immediate: true,
      deep: true,
    },
    multipleSelection: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.$emit("selectData", newVal);
        }
      },
      immediate: true,
      deep: true,
    },
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  },
  mounted() {
    this.setEmptyTips();
  },
  methods: {
    // 点击分页 *******
    changePage(val) {
      this.page.current = val;
      // 这个会传回page对象 调用父组件的changePage方法，请求数据
      this.$emit("changePage", this.page);
    },
    // 改变每页显示记录数
    changeSize(val) {
      this.page.pageSize = val;
      this.$emit("changeSize", this.page);
    },
    // 每一页pageSize持久化
    pageSizeStore(val) {},
    handleSelectionChage(val) {
      this.multipleSelection = val;
    },
    filterTag(value, row) {
      return row[this.statusProp] === value;
    },
    setEmptyTips() {
      setTimeout(() => {
        this.showEmptyTips = true;
      }, 300);
    },
    // 表格间隔
    tableRowClassName({ row, rowIndex }) {
      return (rowIndex + 1) % 2 === 0 ? "even-row" : "odd-row";
    },
    doLayout() {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
    // 选择框翻页记忆
    // 指定一个key标识这一行的数据
    getRowKey (row) {
      return row.id
    },
    //数据选择事件  在watch中会将选中的数据返回父组件
    handleSelectionChange(val){
        this.multipleSelection = val;
        // this.multipleSelection = selection;
        // console.log(this.multipleSelection)
        this.$emit("getDataBySelectBox", val)
    },
    //数据选择事件  当勾选全部时触发
    handleSelectAll(section){
      this.$emit("select-all-event",section);
    }
  },
};
</script>

<style lang="scss" scoped>
.the-table {
  height: 100% !important;

  // 分页组件
  /deep/ .el-pagination {
    margin: 20px 0 0 -5px;
    padding-left: 0;
  }

  // 滚动条
  /deep/ ::-webkit-scrollbar {
    height: 6px !important;
    display: block !important;
  }

  .empty {
    i {
      color: #d7d6d6;
      font-size: 40px;
    }

    p {
      color: #999999;
      font-size: 13px;
      line-height: 30px;
      margin-top: -10px;
    }
  }

  .pagination {
    margin-left: 200px;
  }
}

.hide-scroll-bar {
  /deep/ ::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }
}
</style>